import styles from './modal.module.scss'
import './transition.css'
import { Transition } from 'vue'
const visible = ref(false)
export default () => {
  return (
    <>
      <button onClick={() => (visible.value = !visible.value)}>
        {visible.value ? '隐藏' : '显示'}
      </button>
      <Modal v-model={visible.value}>
        {{
          default: () => <div>hello world</div>
        }}
      </Modal>
    </>
  )
}

const Modal = ({ modelValue }, { emit, slots }) => {
  const handleClose = (e) => {
    emit('update:modelValue', false)
  }
  return (
    <Transition name="modal">
      <div v-show={modelValue} className={styles.modal} onClick={handleClose}>
        <div className={styles.modalContent}>{slots.default?.()}</div>
      </div>
    </Transition>
  )
}
Modal.emits = ['update:modelValue']
